<template>
  <q-header
    bordered
    class="bg-white text-dark row"
    v-if="$store.getters['persisted/accounts'].length > 0"
  >
    <accounts-tabs
      class="col-6"
      inline-label
      outside-arrows
      mobile-arrows
      v-model="data.accounts.tab"
      :breakpoint="0"
    ></accounts-tabs>
    <q-tabs
      class="col-6"
      v-model="data.demands.tab"
      indicator-color="primary"
      align="right"
      inline-label
      outside-arrows
      mobile-arrows
      :breakpoint="0"
    >
      <template v-for="(item, index) in data.demands.options" :key="index">
        <q-tab :name="item.value" :label="item.label" />
      </template>
    </q-tabs>
  </q-header>
</template>

<script>
import {
  defineComponent,
  reactive,
  computed,
  inject,
  watch,
  nextTick,
} from "vue";
import AccountsTabs from "src/components/AccountsTabs.vue";
import { useStore } from "vuex";

export default defineComponent({
  components: { AccountsTabs },
  name: "ComponentsHeadersDemandHeaderVue",
  setup() {
    const bus = inject("bus");
    const $store = useStore();
    const data = reactive({
      accounts: {
        list: computed(() => $store.getters["persisted/accounts"]),
        tab: 0,
        current: computed(() => data.accounts.list[data.accounts.tab]),
      },
      demands: {
        tab: 2,
        options: [
          { value: 1, label: "推荐" },
          { value: 2, label: "订阅" },
          { value: 3, label: "投标活动" },
        ],
      },
    });

    watch(
      () => data.accounts.tab,
      (val) => {
        nextTick(() => bus.emit("changeAccountTab", val));
      },
      { immediate: true }
    );
    watch(
      () => data.demands.tab,
      (val) => {
        nextTick(() => bus.emit("changeDemandTab", val));
      },
      { immediate: true }
    );
    return { data };
  },
});
</script>
